<template>
  <div>
    <div class="index-banner-box">
      <el-carousel class="swiper" :interval="5000" arrow="always" height="600px">
        <el-carousel-item v-for="(item, index) in carouselList" :key="index" >
          <el-image :src="item.src" class="index-banner" style="cursor: pointer;" fit="cover" @click="clickBanner(item)"></el-image>
        </el-carousel-item>
      </el-carousel>

      <div class="index-notice-box" v-if="notice.length > 0">
        <div class="index-notice-content-box">
          <div class="notice-icon-box">
            <el-image
              src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/icon/notice-red.png"
              class="notice-icon"
              fit="cover"
            ></el-image>
          </div>
          <div class="notice-line-box"></div>
          <div class="notice-content-box">
            <el-carousel
              height="50px"
              direction="vertical"
              :autoplay="true"
              indicator-position="none"
            >
              <el-carousel-item v-for="(item, key) in notice" :key="key">
                <div
                  style="
                    color: #e60012;
                    cursor: pointer;
                    white-space: nowrap;
                    overflow: hidden;
                  "
                  @click="toDetail(item.id)"
                >
                  {{ item.title }}
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
          <div
            style="color: #666666; cursor: pointer; width: 129px; text-align: right"
            @click="toNotice()"
          >
            更多 >
          </div>
        </div>
      </div>
    </div>

    <div class="index-title-body"></div>

    <!--    方案-->
    <div>
      <div style="margin-bottom: 60px">
        <item1
          :classifyList="classifyList"
          :notice="notice"
          :list="list"
          @clickItem1="clickItem1"
          @getClassifyId="getClassifyId"
        ></item1>
      </div>
      <div style="margin-top: -40px; margin-bottom: 60px">
        <div
          style="
            width: 1000px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: auto;
            line-height: 0;
          "
        >
          <div style="font-size: 22px; margin-bottom: 40px; line-height: 0">
            {{ item2Name }}
          </div>
          <!-- <div
            @click="back"
            style="
              font-size: 18px;
              color: #8d8d8d;
              margin-bottom: 50px;
              display: flex;
              align-items: center;
              cursor: pointer;
            "
          >
            <img
              src="@/assets/img/arrow_left.png"
              style="width: 24px; height: 24px"
              alt=""
            />
            <span style="margin-left: 5px">返回</span>
          </div> -->
        </div>
        <!-- <item2 :list="list"></item2> -->
      </div>
      <!-- <div v-if="list.length <= 0" style="
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;
          margin-bottom: 120px;
        ">
        <img src="../../assets/img/nodata.png" style="height: 180px; object-fit: contain" alt="" />
        <div style="color: #999999; font-size: 18px">暂无数据</div>
      </div> -->
    </div>
    <!--理赔流程-->
    <div class="lipei-box">
      <div class="lipei-body">
        <div class="lipei-liuc">理赔流程</div>
        <div class="lipei-liuc-memo">Claim Process</div>
        <!-- <img
          src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/pc/lp-title.png"
          class="lipei-img"
        /> -->
        <div class="lipei-info">
          <div class="lipei-info-item">
            <img
              src="@/assets/img/报案.png"
              class="lipei-info-img"
            />
            <div class="lipei-info-title">第一步：报案</div>
            <div class="lipei-info-memo">联系保险公司或我司客服人</div>
            <div class="lipei-info-memo">员报案获取报案号</div>
          </div>
          <div class="lipei-info-item">
            <img
              src="@/assets/img/提交理赔资料.png"
              class="lipei-info-img"
            />
            <div class="lipei-info-title">第二部：提交理赔材料</div>
            <div class="lipei-info-memo">理赔客服会指导您在线提交</div>
            <div class="lipei-info-memo">或快递理赔材料</div>
          </div>
          <div class="lipei-info-item">
            <img
              src="@/assets/img/理赔资料审核.png"
              class="lipei-info-img"
            />
            <div class="lipei-info-title">第三步：理赔材料审核</div>
            <div class="lipei-info-memo">理赔材料快速审核</div>
            <div class="lipei-info-memo">专业便捷</div>
          </div>
          <div class="lipei-info-item">
            <img
              src="@/assets/img/成功获得理赔.png"
              class="lipei-info-img"
            />
            <div class="lipei-info-title">第四步：成功获得理赔</div>
            <div class="lipei-info-memo">最快当天可结案并支付</div>
            <div class="lipei-info-memo">到账时间以银行实际到账时间为准</div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="q-box">
      <div class="lipei-liuc">常见问题</div>
      <div class="lipei-liuc-memo">Questions and Answers</div>
      <img src="https://jy-yyzj.oss-cn-shanghai.aliyuncs.com/jdbx/pc/lp-title.png" class="lipei-img" />
      <div class="q-body" v-for="(item, key) in question" :key="key">
        <div class="q-form">
          <div class="q-label">Q</div>
          <div class="q-content">{{ item.ask }}</div>
        </div>
        <div class="q-form q-form-a">
          <div class="q-label">A</div>
          <div class="q-content q-content-w">
            <div v-for="(val, k) in item.answer" :key="key + '-' + k">
              {{ val }}
            </div>
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
// import { debug } from 'console';
import item1 from "./item1.vue";
//import item2 from "./item2.vue";
export default {
  data() {
    return {
      dialogVisible: false,
      notice: [],
      question: [
        {
          ask: "雇主责任险的保障范围有哪些？",
          answer: [
            "在保险期间内，被保险人的在保员工在受雇过程中因从事被保险人所安排的企业经营范围内的工作（限定保障范围内工种）而遭受意外事故（包括上下班途中遭受意外事故），或患与业务有关的国家规定的职业性疾病，所致伤、残或死亡，依照中华人民共和国法律应由被保险人承担的经济赔偿责任，保险人按照保险合同约定在赔偿限额内负责赔偿。",
          ],
        },
        {
          ask: "短期工是否可以投保？",
          answer: [
            "短期工可以投保。只要是单位的雇员都可以，包括正式在册员工、短期工、临时工、季节工和徒工。投保年龄在16-65周岁之间。",
          ],
        },
        {
          ask: "是否有纸质版保单和发票？",
          answer: [
            "根据《中华人民共和国民法典》第四百六十九条规定，数据电文是合法的合同表现形式，与纸质合同具有同样的法律效力，所以保险合同以电子保单形式提供。另外可根据投保单位的需求提供电子发票和纸质专票。",
          ],
        },
        {
          ask: "怎么投保？怎么支付？",
          answer: [
            "选方案→填信息→支付保费→获取保单。",
            "目前支持微信、支付宝、银联支付。",
          ],
        },
        {
          ask: "中途是否可以加人？",
          answer: ["中途可以增加保障人员。"],
        },
        {
          ask: "出险后什么时候报案？",
          answer: [
            "1）被保障人员在出险后，请在48小时内报案。如因延迟报案，使得保险公司无法及时查勘或核实事故发生情况，保险公司对无法确定的损失有权拒绝赔偿或部分赔偿。",
            "2）超出48小时报案的，索赔时被保险公司必须提供由当地政府相关部门出具的工伤认定以及相关伤残/死亡鉴定报告。",
          ],
        },
        {
          ask: "报案后有没有人到现场查勘？",
          answer: [
            "在接到被保险公司报案后，我们会第一时间由理赔专员协助您指导处理赔案、收集资料。一般案件我们不进行现场查勘，但这不影响您后期的赔付。但如果涉及到死亡、伤残案件时保险公司一般会对事故进行调查，如果需要您配合的，请一定配合保险公司完成案件调查工作。",
          ],
        },
        {
          ask: "报案后，对于事故现场有没有特别要求？",
          answer: [
            "被保障人员出险后，需要提供详细的事故报告，并保存好现场事故照片。如果被保险公司提供的事故报告内容与事实不符，或拒不提供相关人员有效的联系方式，使得保险公司无法及时查勘或核实事故发生情况，保险公司对无法确定的损失有权拒绝赔偿或部分赔偿。",
          ],
        },
        {
          ask: "发生保险事故后需要提供什么索赔材料？",
          answer: [
            "根据不同的案件情况所需要提供的资料不一样，您报案后，我们理赔人员会根据你的案件情况推送您所需要提供的资料清单。",
          ],
        },
        {
          ask: "出险后发现实际工种和投保时的工作不一致，怎么处理？",
          answer: [
            "被保障人员出险时实际工作类型必须与投保时工作类型一致，如出险时被保障人员工作类型与投保时工作类型不一致或出险时的职业类别高于投保时的职业类别，保险公司会拒绝赔偿或部分赔偿。如出险时，若被保障人员实际职业类别低于保单人员清单列明职业类别的，保险公司应承担保险责任。",
          ],
        },
        {
          ask: "出险后被保险公司人员的劳动关系，需要提供什么材料？",
          answer: [
            "被保障人员必须与被保险公司存在实际用工关系，并提供相关的劳动合同，如果无法提供正式的劳动合同，被保险公司需提供其他证明劳动关系的材料，如被保障人员和被保险公司之间的薪资发放流水或社保缴纳凭证等。",
          ],
        },
        {
          ask: "当出现不能判定是否工伤的问题发生争议时，怎么处理？",
          answer: [
            "当出现可能因非意外或非工伤的事故时，您需要到社保局做工伤认定。工伤认定所产生的相关费用，不在理赔范围。",
          ],
        },
        {
          ask: "误工天数是如何核定的呢？",
          answer: [
            "误工天数是根据医嘱建休时间和人身损害误工期评定规范，并结合实际伤情综合核定的最小时间。每人累计赔偿不超过180天。医院的建休天数作为误工判定的标准之一。",
          ],
        },
      ],
      navIndex: 0,
      navList: ["精选方案", "空调家电行业", "光伏发电行业"],
      carouselList: [],
      list: [],
      classifyList: [],
      param: {
        classify_id: "1",
      },
      item1Show: true,
      item2Name: "",
    };
  },
  components: {
    item1,
  },
  mounted() {
    //正式环境
    // this.$router.push({
    //   path: "/index/index/detail/15",
    // });
    if(!this.showTestFeatures){
      this.$router.push({
      path: "/index/index/detail/13",
    });
    }
   
    this.code = this.$route.params.code;
    this.getNotice();
    if (this.code) {
      this.login(this.code);
    }
    this.carousel();
    this.getInfo();
    // this.index(0);
    this.classify();
    this.clickItem1();
  },
  methods: {

    getInfo() {
      this.ajaxs("user/getInfo", {
        success: (res) => {
          if (res.code) {
            this.$store.commit("updateUserInfo", res.msg);
            // this.userInfo = this.$store.state.userInfo;
            console.log(this.$store.state.userInfo);
            console.log("获取用户信息");

            this.$forceUpdate();
          }

        },
      });
    },
    clickBanner(item){
      this.$router.push('/index/index/detail/' + item.bx_id)
    },
    getClassifyId(classify_id){
      this.param.classify_id = classify_id;
      this.clickItem1();
    },
    back() {
      this.item1Show = true;
    },
    clickItem1() {
      // this.param.classify_id = 1;
      // this.item2Name = "";
      this.ajaxs("index/insure", {
        data: this.param,
        success: (res) => {
          if (res.code) {
            this.list = res.msg;
          }
        },
      });
    },
    //分类
    classify() {
      this.ajaxs("index/classify", {
        success: (res) => {
          if (res.code) {
            this.classifyList = res.msg;
            // this.classifyList[0].image = require('@/assets/img/1.png')
            // this.classifyList[1].image = require('@/assets/img/2.png')
            // this.classifyList[2].image = require('@/assets/img/3.png')
            console.log(res);
          }
        },
      });
    },
    login(code) {
      this.ajaxs("index/login", {
        data: { code: code },
        success: (res) => {
          if (res.code) {
            location.href = "/index/index/index";
          }
        },
      });
    },
    carousel() {
      this.ajaxs("index/carousel", {
        success: (res) => {
          this.carouselList = res.msg;
        },
      });
    },
    index(type) {
      this.ajaxs("index/index", {
        data: {
          type,
        },
        success: (res) => {
          this.list = res.msg;
        },
      });
    },
    toNotice() {
      this.$router.push({
        path: "/index/index/notice",
      });
    },
    toDetail(id) {
      this.$router.push({
        path: "/index/index/notice-detail/" + id,
      });
    },
    getNotice() {
      this.ajaxs("index/getIndexNotice", {
        success: (res) => {
          this.notice = res.msg;
        },
      });
    },
    seeFa(item) {
      if (item.type == 1) {
        this.$router.push({
          path: "/index/index/detail/" + item.id,
        });
      } else {
        this.$router.push({
          path: "/index/index/detailGF/" + item.id,
        });
      }
    },
    toTou(item) {
      // this.getTanChuan(item);
      // return;
      if (item.type == 1) {
        // debugger
        this.$router.push({
          path: "/index/index/form/" + item.id,
        });
      } else {
        this.$router.push({
          path: "/index/index/formGF/" + item.id,
        });
      }
    },
    itemClick(index) {
      this.navIndex = index;
      this.index(index);
    },
  },
};
</script>

<style scoped>
@import "../../assets/css/index/index.css";

.nav {
  width: 100%;
  height: 111px;
  line-height: 111px;
  background-color: #fff;
  display: flex;
  align-items: center;
}

.nav_content {
  width: 1000px;
  margin: 0 auto;
  display: flex;
}

.navActive {
  background: linear-gradient(270deg, #468eff 0%, #59baff 100%);
  color: #fff;
  border-radius: 5px;
}

.nav_content .item {
  width: 195px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  font-size: 22px;
  cursor: pointer;
}

.swiper /deep/ .el-carousel__arrow--left {
  width: 70px;
  height: 70px;
  left: 200px;
  font-size: 25px;
  background: rgba(0, 0, 0, 0.39);
}

.swiper /deep/ .el-carousel__arrow--right {
  width: 70px;
  height: 70px;
  right: 200px;
  font-size: 25px;
  background: rgba(0, 0, 0, 0.39);
}

.swiper /deep/ .el-carousel__button {
  display: none;
}

.newbtn {
  border-radius: 22px;
  border: 1px solid #468eff;
  background-color: #ffffff;
  color: #468eff;
}

.newbtn2 {
  border-radius: 22px;
  border: 1px solid #f86768;
  background-color: #f86768;
  color: #ffffff;
}
</style>
